<template>
  <div class="left-one">
    <!-- 标题 -->
    <div class="title-box">
      当地人口数量情况
      <div class="title-line"></div>
      <div class="title-line2"></div>
    </div>
    <!-- 内容 -->
    <div class="content-box">
      <div id="radarEcharts" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  methods: {
    initRadarEcharts() {
      let radarEcharts = echarts.init(document.getElementById("radarEcharts"));
      let options = {
        // title: { text: "基础雷达图" },
        tooltip: {},
        legend: {
          data: ["人口分布", "流动人数"],
          right: 5,
          top: 5,
          orient: "vertical",
          textStyle: {
            fontSize: 12,
            fontFamily: "Source Han Sans CN",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        radar: {
          // shape: 'circle',
          splitNumber: 4, // 雷达图圈数设置
          center: [145, 140],
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 6],
            },
          },
          indicator: [
            { name: "小区", max: 30000 },
            { name: "学校", max: 5000 },
            { name: "机关单位", max: 500 },
            { name: "产业园", max: 2000 },
            { name: "厂区", max: 10000 },
          ],
        },
        series: [
          {
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [26500, 4200, 450, 1800, 8000],
                name: "人口分布",
              },
              {
                value: [21000, 3500, 300, 1300, 5400],
                name: "流动人数",
              },
            ],
          },
        ],
      };
      radarEcharts.setOption(options);
    },
  },
  mounted() {
    this.initRadarEcharts();
  },
};
</script>

<style scoped>
.title-box {
  position: relative;
  padding: 0.8vw;
  display: flex;
  align-items: center;
  height: 20px;
  color: #fff;
  user-select: none;
  background-color: rgba(58, 64, 79, 0.8);
}

.content-box {
  padding: 0.5vw;
  height: 37.5vh;
  color: #fff;
}
</style>